<template>
    <div>
        <quill-editor
            theme="snow"
            v-model:content="formModel.content"
            contentType="html"
            ref="myEditor"
            >
        </quill-editor>
        <el-button plain @click="postQuillContent">POST内容</el-button>
        <el-button plain @click="getRequest">GET内容</el-button>
        <div v-html="parsedContent"></div>
    </div>
</template>
<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {ref,computed} from 'vue'
import axios from 'axios'
const url = 'http://192.168.1.123:8080/picture';
const myEditor = ref(null);
const formModel = ref({
    // id:12,
    content: ''
})
const postQuillContent = () => {
    if (myEditor.value) {
        // const quillContent = myEditor.value.quill.root.innerHTML;
        const quillContent = myEditor.value.getHTML();
        //   axios.post(url, { context:quillContent})
          axios.post(url, formModel.value)
            .then(response => {
                console.log('成功收到响应：', response.data);
            })
            .catch(error => {
                console.error('请求出错：', error);
            });
        // postRequest(quillContent)
        console.log(quillContent);
    }else{
        console.log('myEditor.value doesnt exist');
    }
};
// 一个计算属性 ref
const parsedContent = computed(() => {
    return formModel.value.content; 
});
const geturl='http://192.168.1.123:8080/get/picture'
const getRequest=()=>{
    axios.get(geturl)
        .then(response => {
            console.log('成功收到响应：', response.data);
        })
        .catch(error => {
            console.error('请求出错：', error);
        });
}
// const postRequest=()=>{
//     axios.post(url, formModel.value)
//     .then(response => {
//         console.log('成功收到响应：', response.data);
//     })
//     .catch(error => {
//         console.error('请求出错：', error);
//     });
// }


</script>

<style scoped>

</style>